<template>
  <div class="page-container">
    <page_breadcrumb :getKeyMethod="init_table_model" @change="change_table_model" pageOption />
    <ex_super_table_page v-bind="option" ref="SuperTablePage" :autoPage="false" @selection-change="e => selection = e"
      @search="refreshNotice()"
      >
    </ex_super_table_page>

    <message_dialog ref="message_dialog" @readFinish="reload()" />

  </div>
</template>
<script>
import superTablePageFunction from '@/mixin/super-table-page-function';
import page_table_model_manage from '@/mixin/page_table_model_manage';
import message_dialog from '@/component/common/message_dialog';
import emitOnFunction from '@/mixin/emit-on-function';
let emitKey = 'messageAnnouncement=>list'

export default {
  title: 'label_message_announcement',
  mixins: [superTablePageFunction,emitOnFunction(emitKey), page_table_model_manage,],
  components: { message_dialog },
  data() {
    return {
      selection: [],
      option: {
        search: {
          model: [
            { key: "title", label: "label_message_title", },

            {
              key: 'publishDateStart', label: "label_publish_time", fold: false, type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const value = data[item.key]
                const limitKey = 'publishDateEnd'
                const limitValue = data[limitKey]

                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_start_time"
                  attrs={{ type: 'datetime' }}
                  pickerOptions={{
                    disabledDate: date => { return limitValue ? (limitValue < date.getTime()) : false }
                  }}
                />)
              }

            },
            {
              key: 'publishDateEnd', label: "~", fold: false, type: 'date-picker', attrs: { type: 'datetime' },
              render: (h, { data, item }) => {
                const value = data[item.key]
                const limitKey = 'publishDateStart'
                const limitValue = data[limitKey]
                return (<ex_super_input value={value} onInput={e => this.$set(data, item.key, e)} type="date-picker" placeholder="label_end_time"
                  attrs={{ type: 'datetime', 'default-time': '23:59:59' }}
                  pickerOptions={{
                    disabledDate: date => { return limitValue ? (limitValue > date.getTime()) : false }
                  }}
                />)
              }
            },
          ],
        },
        table: {
          url: "/oms-api/client/OmsBaseNotifyClientRpc/selectPage.json",
          model: this.init_table_model(),
        },
      },


    };
  },
  methods: {
    refreshNotice(){
      this.$store.dispatch('refreshNotice')
    },
    option_table_model() {
      return [
        {
          key: 'title', label: 'label_message_title', 'min-width': 140, 'show-overflow-tooltip': true,
        },
        { key: 'publishDate', label: 'label_publish_time', 'width': 140, 'show-overflow-tooltip': true, formatter: (r, c, v, i) => this.$dateFormat(v) },
        {
          key: 'isRead', label: 'label_status', 'width': 140, 'show-overflow-tooltip': true,
          render: (h, scope) => this.$renderText(h, scope, { enum: "YesOrNoEnum", showValue: scope.row.isRead == 'Y' ? this.$t('label_has_read') : this.$t('label_no_read') })
        },
        {
          type: 'operate', width: 210, fixed: "right", operate: [
            {
              label: "label_view",
              click: (row) => {
                this.$refs.message_dialog.show(row.id,row.isRead)
              }
            },
          ]
        },
      ]
    },


  }
};

</script>
<style></style>
